import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group'
import './ToggleDemo.css'

class ToggleDemo extends Component {
  state = { show: true }

  toggleShow = () => {
    this.setState({
      show: !this.state.show
    })
  }

  render() {
    // let className = 'anim'
    // className += ' ' + (this.state.show ? 'show' : 'hide')
    return (
      <div>

        <CSSTransition
          in={this.state.show}
          timeout={500}
          classNames='fade'
          unmountOnExit={true}
        >
          <p>一个元素。</p>
        </CSSTransition>

        {/* <p className={className}>一个元素。</p> */}
        <button onClick={this.toggleShow}>切换</button>
      </div>
    );
  }
}

export default ToggleDemo;